<template>
  <el-button
    v-if="hasAuth"
    :type="type"
    :size="size"
    :plain="plain"
    :round="round"
    :circle="circle"
    :loading="loading"
    :disabled="disabled"
    :icon="icon"
    :autofocus="autofocus"
    :native-type="nativeType"
    :autocomplete="autocomplete"
    @click="handleClick"
  >
    <slot />
  </el-button>
</template>

<script setup>
import { computed } from 'vue'
import { hasPermission } from '@/utils/permission.js'

const props = defineProps({
  // 权限标识
  permission: {
    type: [String, Array],
    default: ''
  },
  // 按钮类型
  type: {
    type: String,
    default: 'default'
  },
  // 按钮尺寸
  size: {
    type: String,
    default: ''
  },
  // 是否朴素按钮
  plain: {
    type: Boolean,
    default: false
  },
  // 是否圆角按钮
  round: {
    type: Boolean,
    default: false
  },
  // 是否圆形按钮
  circle: {
    type: Boolean,
    default: false
  },
  // 是否加载中
  loading: {
    type: Boolean,
    default: false
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 图标组件
  icon: {
    type: [String, Object],
    default: ''
  },
  // 是否默认聚焦
  autofocus: {
    type: Boolean,
    default: false
  },
  // 原生 type 属性
  nativeType: {
    type: String,
    default: 'button'
  },
  // 自动填充
  autocomplete: {
    type: String,
    default: 'off'
  }
})

const emit = defineEmits(['click'])

// 计算是否有权限
const hasAuth = computed(() => {
  if (!props.permission) return true
  
  const permissions = Array.isArray(props.permission) ? props.permission : [props.permission]
  return permissions.some(permission => hasPermission(permission))
})

// 处理点击事件
const handleClick = (event) => {
  emit('click', event)
}
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>